<template>
  <div>
    <van-nav-bar
      title="城市列表"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-index-bar :index-list="list">
      <div v-for="item in cityList" :key="item.name">
        <van-index-anchor index="item.name">{{ item.name }}</van-index-anchor>
        <van-cell
          :title="item1.label"
          v-for="(item1, index) in item.city"
          :key="index"
          style="font-size: 14px"
          @click.stop="add(item1)"
        ></van-cell>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { getCitys, getHotCity } from '@/api/city'
import { setLocalCity, getLocalCity } from '@/utils/storage'
export default {
  name: 'city-page',
  components: {},
  props: {},
  data() {
    return {
      list: [],
      value: '',
      hotCity: { name: '热', city: [] },
      cityList: [
        { name: 'A', city: [] },
        { name: 'B', city: [] },
        { name: 'C', city: [] },
        { name: 'D', city: [] },
        { name: 'E', city: [] },
        { name: 'F', city: [] },
        { name: 'G', city: [] },
        { name: 'H', city: [] },
        { name: 'I', city: [] },
        { name: 'J', city: [] },
        { name: 'K', city: [] },
        { name: 'L', city: [] },
        { name: 'M', city: [] },
        { name: 'N', city: [] },
        { name: 'O', city: [] },
        { name: 'P', city: [] },
        { name: 'Q', city: [] },
        { name: 'R', city: [] },
        { name: 'S', city: [] },
        { name: 'T', city: [] },
        { name: 'U', city: [] },
        { name: 'V', city: [] },
        { name: 'W', city: [] },
        { name: 'X', city: [] },
        { name: 'Y', city: [] },
        { name: 'Z', city: [] }
      ],
      nowCity: {
        name: '#',
        city: []
      }
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res1 = await getHotCity()
    const res = await getCitys({ level: 1 })
    this.hotCity.city = res1.data.body
    console.log(this.hotCity)
    const arr = res.data.body
    this.cityList.forEach((item) => {
      arr.forEach((item1) => {
        if (item1.short[0].toUpperCase() === item.name) {
          item.city.push(item1)
        }
      })
    })
    this.nowCity.city = [getLocalCity()]
    this.cityList = this.cityList.filter((item) => item.city.length !== 0)
    this.cityList.unshift(this.nowCity, this.hotCity)
    this.cityList.forEach((item) => this.list.push(item.name))
    console.log(this.cityList)
  },
  methods: {
    add(value) {
      // deleteLocalCity()
      setLocalCity(value)
      this.nowCity.city = [getLocalCity()]
      // console.log(this.nowCity.city)
    }
  }
}
</script>

<style scoped lang="less">
.van-nav-bar {
  position: fixed;
  top: 0;
  width: 100%;
}
.van-index-bar {
  margin-top: 50px;
}
::v-deep .van-index-anchor {
  background-color: rgba(204, 204, 204, 0.849);
  font-family: 700;
}
</style>
